import { NavBar, Badge, Toast } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { goodsList } from '../../mock/goods';

import * as cartApi from '../../api/cart';

export default (props) => {
    const [cartList, setCartList] = useState([]);

    // useEffect 函数只能接受同步函数，不能接受异步函数
    useEffect(() => {
        getCartList();
    }, []);

    const getCartList = async () => {
        const res = await cartApi.getList();
        // console.log(res);
        setCartList(res.data);
    };

    // 加入购物车
    const handleAddCart = async (item) => {
        console.log('item', item);
        const res = await cartApi.add(item.id);
        if (res.code !== 201) {
            Toast.fail(res.message);
            return;
        }
        getCartList();
    };

    return (
        <div className="home-page">
            <header className="sticky top-0">
                <NavBar
                    icon="首页"
                    rightContent={
                        <div
                            className="cursor-pointer"
                            onClick={() => props.history.push('/cart')}
                        >
                            <Badge text={cartList.length}>
                                <i className="iconfont icon-icon-2 text-lg"></i>
                            </Badge>
                        </div>
                    }
                >
                    商城首页
                </NavBar>
            </header>

            <main>
                <div className="flex flex-wrap">
                    {goodsList.map((item, index) => {
                        return (
                            <div key={index} className="w-1/2 p-2">
                                <div className="shadow w-full h-full p-3">
                                    <a
                                        href="#"
                                        className="h-2/3 block overflow-hidden"
                                    >
                                        <img
                                            src={item.img}
                                            className="w-full h-full object-cover object-center rounded"
                                        />
                                    </a>
                                    <h3 className="my-5 text-lg font-medium">
                                        {item.name}
                                    </h3>

                                    <div className="flex justify-between items-center">
                                        <span className="text-yellow-500">
                                            ¥{item.price}
                                        </span>

                                        <span
                                            className="bg-red-500 px-4 py-2 rounded-full text-gray-200 cursor-pointer"
                                            onClick={() => handleAddCart(item)}
                                        >
                                            加入购物车{' '}
                                            <i className="iconfont icon-icon-"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </main>
        </div>
    );
};
